<script lang="ts" setup>
import { onMounted, ref } from 'vue';

import { IconifyIcon } from '@vben/icons';

import {
  Button,
  Form,
  FormItem,
  Input,
  Select,
  SelectOption,
  TabPane,
  Tabs,
  Tag,
  Textarea,
} from 'ant-design-vue';

import { getCapabilityTemplates } from '#/api/resource-center';

// Props
const props = defineProps<{
  visible?: boolean;
}>();

// Emits
const emit = defineEmits<{
  'select-template': [template: any];
}>();

// 响应式数据
const activeCategory = ref('business');
const businessTemplates = ref<any[]>([]);
const technicalTemplates = ref<any[]>([]);

const customTemplate = ref({
  name: '',
  description: '',
  type: 'api',
  icon: 'ant-design:setting-outlined',
});

// 加载能力模板
const loadTemplates = async () => {
  try {
    // 加载业务能力模板
    const businessData = await getCapabilityTemplates({ category: 'business' });
    businessTemplates.value = businessData || [];

    // 加载技术能力模板
    const technicalData = await getCapabilityTemplates({
      category: 'technical',
    });
    technicalTemplates.value = technicalData || [];
  } catch (error) {
    console.error('加载能力模板失败:', error);
    // 如果API调用失败，显示空数据
    businessTemplates.value = [];
    technicalTemplates.value = [];
  }
};

// 选择模板
const selectTemplate = (template: any) => {
  console.log('选择模板:', template);
  emit('select-template', template);
};

// 创建自定义模板
const createCustomTemplate = () => {
  if (!customTemplate.value.name || !customTemplate.value.description) {
    return;
  }

  const template = {
    id: `custom_${Date.now()}`,
    name: customTemplate.value.name,
    description: customTemplate.value.description,
    icon: customTemplate.value.icon,
    type: customTemplate.value.type,
    tags: ['自定义'],
    implementation: {
      type: customTemplate.value.type,
    },
  };

  console.log('创建自定义模板:', template);
  emit('select-template', template);

  // 重置表单
  customTemplate.value = {
    name: '',
    description: '',
    type: 'api',
    icon: 'ant-design:setting-outlined',
  };
};

// 组件挂载时加载模板
onMounted(() => {
  loadTemplates();
});
</script>

<template>
  <div class="capability-template-library">
    <div class="template-header">
      <h3>能力模板库</h3>
      <p>选择预定义的能力模板快速配置</p>
    </div>

    <!-- 模板分类 -->
    <div class="template-categories">
      <Tabs v-model:active-key="activeCategory" type="card">
        <TabPane key="business" tab="业务能力">
          <div class="template-grid">
            <div
              v-for="template in businessTemplates"
              :key="template.id"
              class="template-item"
              @click="selectTemplate(template)"
            >
              <div class="template-icon">
                <IconifyIcon :icon="template.icon" />
              </div>
              <div class="template-info">
                <h4>{{ template.name }}</h4>
                <p>{{ template.description }}</p>
                <div class="template-tags">
                  <Tag v-for="tag in template.tags" :key="tag" size="small">
                    {{ tag }}
                  </Tag>
                </div>
              </div>
              <div class="template-actions">
                <Button
                  type="primary"
                  size="small"
                  @click.stop="selectTemplate(template)"
                >
                  选择模板
                </Button>
              </div>
            </div>
          </div>
        </TabPane>

        <TabPane key="technical" tab="技术能力">
          <div class="template-grid">
            <div
              v-for="template in technicalTemplates"
              :key="template.id"
              class="template-item"
              @click="selectTemplate(template)"
            >
              <div class="template-icon">
                <IconifyIcon :icon="template.icon" />
              </div>
              <div class="template-info">
                <h4>{{ template.name }}</h4>
                <p>{{ template.description }}</p>
                <div class="template-tags">
                  <Tag v-for="tag in template.tags" :key="tag" size="small">
                    {{ tag }}
                  </Tag>
                </div>
              </div>
              <div class="template-actions">
                <Button
                  type="primary"
                  size="small"
                  @click.stop="selectTemplate(template)"
                >
                  选择模板
                </Button>
              </div>
            </div>
          </div>
        </TabPane>

        <TabPane key="custom" tab="自定义能力">
          <div class="custom-template">
            <div class="custom-form">
              <Form layout="vertical">
                <FormItem label="能力名称">
                  <Input
                    v-model:value="customTemplate.name"
                    placeholder="请输入能力名称"
                  />
                </FormItem>
                <FormItem label="能力描述">
                  <Textarea
                    v-model:value="customTemplate.description"
                    placeholder="请输入能力描述"
                    :rows="3"
                  />
                </FormItem>
                <FormItem label="能力类型">
                  <Select
                    v-model:value="customTemplate.type"
                    placeholder="请选择能力类型"
                  >
                    <SelectOption value="api">API接口</SelectOption>
                    <SelectOption value="service">服务调用</SelectOption>
                    <SelectOption value="workflow">工作流</SelectOption>
                    <SelectOption value="rule">规则引擎</SelectOption>
                    <SelectOption value="script">脚本执行</SelectOption>
                  </Select>
                </FormItem>
                <FormItem label="图标">
                  <Input
                    v-model:value="customTemplate.icon"
                    placeholder="请输入图标名称"
                  />
                </FormItem>
                <FormItem>
                  <Button type="primary" @click="createCustomTemplate">
                    创建自定义能力
                  </Button>
                </FormItem>
              </Form>
            </div>
          </div>
        </TabPane>
      </Tabs>
    </div>
  </div>
</template>

<style lang="less" scoped>
.capability-template-library {
  padding: 24px;

  .template-header {
    margin-bottom: 24px;
    text-align: center;

    h3 {
      margin-bottom: 8px;
      color: #333;
      font-weight: 600;
    }

    p {
      color: #666;
      margin: 0;
    }
  }

  .template-categories {
    .template-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 16px;
      margin-top: 16px;

      .template-item {
        border: 1px solid #f0f0f0;
        border-radius: 8px;
        padding: 16px;
        cursor: pointer;
        transition: all 0.3s ease;
        background: white;

        &:hover {
          border-color: #1890ff;
          box-shadow: 0 4px 12px rgba(24, 144, 255, 0.15);
        }

        .template-icon {
          text-align: center;
          margin-bottom: 12px;

          .ant-design-icon {
            font-size: 32px;
            color: #1890ff;
          }
        }

        .template-info {
          h4 {
            margin-bottom: 8px;
            color: #333;
            font-weight: 600;
          }

          p {
            margin-bottom: 12px;
            color: #666;
            font-size: 14px;
            line-height: 1.4;
          }

          .template-tags {
            margin-bottom: 12px;
          }
        }

        .template-actions {
          text-align: center;
        }
      }
    }

    .custom-template {
      .custom-form {
        max-width: 500px;
        margin: 0 auto;
        padding: 24px;
        border: 1px solid #f0f0f0;
        border-radius: 8px;
        background: #fafafa;
      }
    }
  }
}
</style>
